<template>
  <editor-content :editor="editor" />
</template>

<script setup lang="ts">
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
// import Document from '@tiptap/extension-document'
// import Paragraph from '@tiptap/extension-paragraph'
// import Text from '@tiptap/extension-text'
// import Heading from '@tiptap/extension-heading'

let editor = ref<Editor>()

const props = defineProps({
  modelValue: {
    type: String,
    value: ''
  }
})

const emits = defineEmits(['update:modelValue'])

const initEditor = () => {
  editor.value = new Editor({
    content: '',
    injectCSS: true,
    extensions: [
      StarterKit.configure({
        heading: {
          // 默认就是显示的1-6级标题
          // levels: [1, 2, 3, 4, 5, 6]
        }
      })
      // Document,
      // Paragraph,
      // Text,
      // Heading.configure({
      //   levels: [1, 2, 3, 4, 5, 6]
      // })
    ],
    onUpdate: () => {
      emits('update:modelValue', editor.value?.getHTML())
      // 拿json
      // emits('update:modelValue', editor.value?.getJSON())
    }
  })
}

onMounted(() => {
  initEditor()
})

onBeforeUnmount(() => {
  if (editor.value) {
    editor.value.destroy()
  }
})
</script>

<style lang="scss" scoped></style>
